<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/message.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">
    <link rel="stylesheet" type="text/css" href="../css/message.css">

</head>
<body>
    <div class="container">
        <div class="col-md-12" style="height: 20px"></div>

        <div class="col-md-8 col-md-offset-2" style="border: 1px solid black">
            <div class="col-md-12" style="height: 20px"></div>

            <!--剩余数目提示-->
            <label class="col-md-6" style="color: #555555;" id="numberTip"></label>
            <div class="col-md-12" style="height: 20px"></div>

            <div class="col-md-12" style="border-bottom: 1px solid black"></div>

            <!--显示贴子情况列表-->
            <div class="col-md-12" id="postList"></div>
            <div class="col-md-12" style="height: 30px"></div>

            <!--显示翻页器-->
            <div class="myPageTurner"></div>

            <div class="col-md-12" style="height: 20px"></div>
        </div>
        <div class="col-md-12" style="height: 30px"></div>
    </div>

    <script type="text/javascript">
        let user, postBar;

        // 翻页器函数存放
        let updatePageTurnerRoot;
        let pageTurner;

        var totalNum;
        let postList = $("#postList");
        let numberTip = $("#numberTip");

        // 请求得到用户信息
        $.ajaxSettings.async = false;
        $.post("/QG_PostBar/user?method=getUserBySession", function (data){
            // 获取得到用户
            user = data;
        }, "json");

        // 请求得到贴吧信息
        $.post("/QG_PostBar/postBar?method=getPostBarBySession", function (data) {
            // 获得贴吧json
            postBar = data;

            // 请求的得到所有被删除贴子的数量
            $.get("/QG_PostBar/post?method=getAllDeletePostForNumber", {"postBarId": postBar.postBarId},function (number){
                totalNum = parseInt(number);
                numberTip.html("已删除的贴子：" + totalNum + " 个");

            });
        }, "json");
        $.ajaxSettings.async = true;

        // 引入翻页器
        $(".myPageTurner").load("myPageTurner.html", function (){
            // 从翻页器中获得更新函数和翻页器
            updatePageTurnerRoot = myUpdatePageTurner;
            pageTurner = myPageTurner;

            // 设置回调函数
            myCallback = getPageDeletePost;

            // 设置数据条数
            pageTurner.attr("totalNum", totalNum);

            updatePageTurnerRoot(0, totalNum);
        });

        // 请求得到贴吧内所有被删除的贴子
        function getPageDeletePost() {
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            $.post("/QG_PostBar/post?method=getAllPostByPage", {"postBarId": postBar.postBarId, "page": nowPage, "num": maxDisplay, "postDelete": 1, "sortClass": "create_date", "sortWay": "desc"}, function (data){
                // 先清空列表
                postList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取贴子对象
                    const post = data[key];
                    addPostItem(postList, post, finish);
                }
                $.ajaxSettings.async = true;
            }, "json");
        }


        // 每完成一次恢复操作调用一次
        function finish() {
            totalNum--;
            numberTip.html("已删除的贴子：" + totalNum + " 个");

            // 更新翻页器数据，不翻页，不用更新数据
            updatePageTurnerRoot(0, totalNum, getPageDeletePost);
        }
    </script>
</body>
</html>